@import '../style/theme/color';
@import '../style/core/layout';

.devui-form-span {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: $devui-text;

  &.devui-required::before {
    content: '*';
    color: red;
    display: inline-block;
    margin-right: 4px;
    margin-left: -8px;
    vertical-align: middle;
  }
}

:host-context(.devui-form-item:hover) {
  .svg-close {
    display: inline-block;
    cursor: pointer;
  }
}

.devui-helping {
  display: inline-block;
  vertical-align: middle;
  margin-left: $content-spacing-small;
  cursor: pointer;

  path {
    fill: $devui-shape-icon-fill;
  }
}

.devui-help-tips {
  display: inline-block;
  margin-left: 20px;
  max-width: 200px;
}

.devui-form-horizontal :host.devui-form-label {
  flex: 0 0 100px;
  justify-content: flex-end;
  text-align: left;
  align-self: flex-start;

  .devui-form-span {
    line-height: 28px;
  }
}

.devui-form-lg.devui-form-horizontal :host.devui-form-label {
  flex: 0 0 150px;
}

.devui-form-sm.devui-form-horizontal :host.devui-form-label {
  flex: 0 0 80px;
}

.devui-form-horizontal.devui-form-label-align-center :host.devui-form-label {
  text-align: center;
}

.devui-form-horizontal.devui-form-label-align-end :host.devui-form-label {
  text-align: right;
}

.devui-form-vertical :host.devui-form-label {
  flex: 1 1 auto;
  -moz-box-flex: 1;
  text-align: left;
  padding-bottom: $content-spacing;
  justify-content: flex-start;
  align-self: flex-start;
}

.devui-form-columns :host.devui-form-label {
  flex: 1 1 auto;
  text-align: right;
  padding-bottom: 8px;
  justify-content: flex-end;
  align-self: flex-start;
}

.devui-form-lg.devui-form-columns :host.devui-form-label {
  flex: 0 0 150px;
  justify-content: flex-end;
  text-align: right;
  align-self: flex-start;
}

.devui-form-sm.devui-form-columns :host.devui-form-label {
  flex: 0 0 80px;
  justify-content: flex-end;
  text-align: right;
  align-self: flex-start;
}

.devui-icon.devui-icon-error {
  margin-left: $content-spacing-small;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.1em;

  & > g > path {
    fill: $devui-danger;
  }

  & > g > circle {
    fill: $devui-light-text;
  }
}
